<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          应用信息
          <div>
            <el-select
              v-model="app_id"
              placeholder="请选择应用信息"
              @change="selectChanged"
            >
              <el-option
                v-for="item in appOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          平台总用户
          <div>
            <i class="el-icon-user-solid" style="color: red"></i>
            <span>{{ data.total_customer_number }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          今日注册人数
          <div>
            <i class="el-icon-user-solid" style="color: red"></i>
            <span>{{ data.customer_number }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          总能量金额（trx）
          <div>
            <i class="el-icon-coin" style="color: orange"></i>
            <span>{{ data.total_energy_trx_amount }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--块类统计-->
    <el-row :gutter="20">

      <el-col :span="3">
        <el-card class="box-card">
          总充提差额
          <div>
            <i class="el-icon-coin" style="color: orange"></i>
            <span>{{ data.total_deposit_withdraw_differ_amount }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          总充值金额
          <div>
            <i class="el-icon-coin" style="color: red"></i>
            <span>{{ data.total_deposit_amount }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          总提现金额
          <div>
            <i class="el-icon-coin" style="color: green"></i>
            <span>{{ data.total_withdraw_amount }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          总充值笔数
          <div>
            <i class="el-icon-star-on" style="color: red"></i>
            <span>{{ data.total_deposit_count }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          总充值人数
          <div>
            <i class="el-icon-user-solid" style="color: red"></i>
            <span>{{ data.total_deposit_customer_number }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          总提现笔数
          <div>
            <i class="el-icon-star-on" style="color: green"></i>
            <span>{{ data.total_withdraw_count }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          总提现人数
          <div>
            <i class="el-icon-user-solid" style="color: green"></i>
            <span>{{ data.total_withdraw_customer_number }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          总赠送金额
          <div>
            <i class="el-icon-coin" style="color: green"></i>
            <span>{{ data.total_give_amount }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <el-row :gutter="20">
      <el-col :span="3">
        <el-card class="box-card">
          总赠送笔数
          <div>
            <i class="el-icon-star-on" style="color: green"></i>
            <span>{{ data.total_give_count }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          总赠送人数
          <div>
            <i class="el-icon-user-solid" style="color: green"></i>
            <span>{{ data.total_give_customer_number }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          总量化金额
          <div>
            <i class="el-icon-coin" style="color: red"></i>
            <span>{{ data.total_quantification_amount }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          总量化笔数
          <div>
            <i class="el-icon-star-on" style="color: red"></i>
            <span>{{ data.total_quantification_count }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          总量化人数
          <div>
            <i class="el-icon-user-solid" style="color: red"></i>
            <span>{{ data.total_quantification_customer_number }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          总投资金额
          <div>
            <i class="el-icon-coin" style="color: red"></i>
            <span>{{ data.total_project_amount }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          总投资笔数
          <div>
            <i class="el-icon-star-on" style="color: red"></i>
            <span>{{ data.total_project_count }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          总投资人数
          <div>
            <i class="el-icon-user-solid" style="color: red"></i>
            <span>{{ data.total_project_customer_number }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="3">
        <el-card class="box-card">
          当月充提差额
          <div>
            <i class="el-icon-coin" style="color: orange"></i>
            <span>{{ data.month_deposit_withdraw_differ_amount }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          当月充值
          <div>
            <i class="el-icon-coin" style="color: red"></i>
            <span>{{ data.month_deposit_amount }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          当月提现
          <div>
            <i class="el-icon-coin" style="color: green"></i>
            <span>{{ data.month_withdraw_amount }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          当月充值笔数
          <div>
            <i class="el-icon-star-on" style="color: red"></i>
            <span>{{ data.month_deposit_count }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          当月充值人数
          <div>
            <i class="el-icon-user-solid" style="color: red"></i>
            <span>{{ data.month_deposit_customer_number }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          当月首充人数
          <div>
            <i class="el-icon-user-solid" style="color: red"></i>
            <span>{{ data.month_first_deposit_number }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          当月提现笔数
          <div>
            <i class="el-icon-star-on" style="color: green"></i>
            <span>{{ data.month_withdraw_count }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          当月提现人数
          <div>
            <i class="el-icon-user-solid" style="color: green"></i>
            <span>{{ data.month_withdraw_customer_number }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="3">
        <el-card class="box-card">
          当天充提差额
          <div>
            <i class="el-icon-coin" style="color: orange"></i>
            <span>{{ data.today_deposit_withdraw_differ_amount }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          当天充值
          <div>
            <i class="el-icon-coin" style="color: red"></i>
            <span>{{ data.today_deposit_amount }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          当天提现
          <div>
            <i class="el-icon-coin" style="color: green"></i>
            <span>{{ data.today_withdraw_amount }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          当天充值笔数
          <div>
            <i class="el-icon-star-on" style="color: red"></i>
            <span>{{ data.today_deposit_count }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          当天充值人数
          <div>
            <i class="el-icon-user-solid" style="color: red"></i>
            <span>{{ data.today_deposit_customer_number }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          当天首充人数
          <div>
            <i class="el-icon-user-solid" style="color: red"></i>
            <span>{{ data.today_first_deposit_number }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          当天提现笔数
          <div>
            <i class="el-icon-star-on" style="color: green"></i>
            <span>{{ data.today_withdraw_count }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          当天提现人数
          <div>
            <i class="el-icon-user-solid" style="color: green"></i>
            <span>{{ data.today_withdraw_customer_number }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {getGroupApp} from "@/api/metadata/app";
import {getStatistics} from "@/api/dashboard/dashboard";

export default {
  name: 'Index',
  components: {},
  data() {
    return {
      appOptions: [],
      app_id: undefined,
      data: {
        total_customer_number: '',
        customer_number: '',
        total_withdraw_amount: '',
        total_deposit_amount: '',
        month_withdraw_amount: '',
        month_deposit_amount: '',
        today_withdraw_amount: '',
        today_deposit_amount: '',
      },
    }
  },
  created() {
    this.getGroupApp()
  },
  methods: {
    selectChanged(value) {
      getStatistics(value, null).then(response => {
        this.data = response.data
      })
    },
    getGroupApp() {
      getGroupApp().then(response => {
        this.appOptions = response.data
        this.app_id = response.data[0].id
        this.selectChanged(this.app_id)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  margin-bottom: 10px;
  text-align: center;
}

.dashboard-editor-container {
  padding: 10px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 10px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
